/* Copyright 2009-2010 Andrea Leofreddi All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ // svg-pan-zoom v3.6.0 // https://github.com/ariutta/svg-pan-zoom (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o= 0; i--) { if (this.eventListeners.hasOwnProperty(haltEventListeners[i])) { delete this.eventListeners[haltEventListeners[i]] } } } } // Bind eventListeners for (var event in this.eventListeners) { // Attach event to eventsListenerElement or SVG if not available (this.options.eventsListenerElement || this.svg) .addEventListener(event, this.eventListeners[event], !this.options.preventMouseEventsDefault ? passiveListenerOption : false) } // Zoom using mouse wheel if (this.options.mouseWheelZoomEnabled) { this.options.mouseWheelZoomEnabled = false // set to false as enable will set it back to true this.enableMouseWheelZoom() } } /** * Enable ability to zoom using mouse wheel */ SvgPanZoom.prototype.enableMouseWheelZoom = function() { if (!this.options.mouseWheelZoomEnabled) { var that = this // Mouse wheel listener this.wheelListener = function(evt) { return that.handleMouseWheel(evt); } // Bind wheelListener var isPassiveListener = !this.options.preventMouseEventsDefault Wheel.on(this.options.eventsListenerElement || this.svg, this.wheelListener, isPassiveListener) this.options.mouseWheelZoomEnabled = true } } /** * Disable ability to zoom using mouse wheel */ SvgPanZoom.prototype.disableMouseWheelZoom = function() { if (this.options.mouseWheelZoomEnabled) { var isPassiveListener = !this.options.preventMouseEventsDefault Wheel.off(this.options.eventsListenerElement || this.svg, this.wheelListener, isPassiveListener) this.options.mouseWheelZoomEnabled = false } } /** * Handle mouse wheel event * * @param {Event} evt */ SvgPanZoom.prototype.handleMouseWheel = function(evt) { if (!this.options.zoomEnabled || this.state !== 'none') { return; } if (this.options.preventMouseEventsDefault){ if (evt.preventDefault) { evt.preventDefault(); } else { evt.returnValue = false; } } // Default delta in case that deltaY is not available var delta = evt.deltaY || 1 , timeDelta = Date.now() - this.lastMouseWheelEventTime , divider = 3 + Math.max(0, 30 - timeDelta) // Update cache this.lastMouseWheelEventTime = Date.now() // Make empirical adjustments for browsers that give deltaY in pixels (deltaMode=0) if ('deltaMode' in evt && evt.deltaMode === 0 && evt.wheelDelta) { delta = evt.deltaY === 0 ? 0 : Math.abs(evt.wheelDelta) / evt.deltaY } delta = -0.3 < delta && delta < 0.3 ? delta : (delta > 0 ? 1 : -1) * Math.log(Math.abs(delta) + 10) / divider var inversedScreenCTM = this.svg.getScreenCTM().inverse() , relativeMousePoint = SvgUtils.getEventPoint(evt, this.svg).matrixTransform(inversedScreenCTM) , zoom = Math.pow(1 + this.options.zoomScaleSensitivity, (-1) * delta); // multiplying by neg. 1 so as to make zoom in/out behavior match Google maps behavior this.zoomAtPoint(zoom, relativeMousePoint) } /** * Zoom in at a SVG point * * @param {SVGPoint} point * @param {Float} zoomScale Number representing how much to zoom * @param {Boolean} zoomAbsolute Default false. If true, zoomScale is treated as an absolute value. * Otherwise, zoomScale is treated as a multiplied (e.g. 1.10 would zoom in 10%) */ SvgPanZoom.prototype.zoomAtPoint = function(zoomScale, point, zoomAbsolute) { var originalState = this.viewport.getOriginalState() if (!zoomAbsolute) { // Fit zoomScale in set bounds if (this.getZoom() * zoomScale < this.options.minZoom * originalState.zoom) { zoomScale = (this.options.minZoom * originalState.zoom) / this.getZoom() } else if (this.getZoom() * zoomScale > this.options.maxZoom * originalState.zoom) { zoomScale = (this.options.maxZoom * originalState.zoom) / this.getZoom() } } else { // Fit zoomScale in set bounds zoomScale = Math.max(this.options.minZoom * originalState.zoom, Math.min(this.options.maxZoom * originalState.zoom, zoomScale)) // Find relative scale to achieve desired scale zoomScale = zoomScale/this.getZoom() } var oldCTM = this.viewport.getCTM() , relativePoint = point.matrixTransform(oldCTM.inverse()) , modifier = this.svg.createSVGMatrix().translate(relativePoint.x, relativePoint.y).scale(zoomScale).translate(-relativePoint.x, -relativePoint.y) , newCTM = oldCTM.multiply(modifier) if (newCTM.a !== oldCTM.a) { this.viewport.setCTM(newCTM) } } /** * Zoom at center point * * @param {Float} scale * @param {Boolean} absolute Marks zoom scale as relative or absolute */ SvgPanZoom.prototype.zoom = function(scale, absolute) { this.zoomAtPoint(scale, SvgUtils.getSvgCenterPoint(this.svg, this.width, this.height), absolute) } /** * Zoom used by public instance * * @param {Float} scale * @param {Boolean} absolute Marks zoom scale as relative or absolute */ SvgPanZoom.prototype.publicZoom = function(scale, absolute) { if (absolute) { scale = this.computeFromRelativeZoom(scale) } this.zoom(scale, absolute) } /** * Zoom at point used by public instance * * @param {Float} scale * @param {SVGPoint|Object} point An object that has x and y attributes * @param {Boolean} absolute Marks zoom scale as relative or absolute */ SvgPanZoom.prototype.publicZoomAtPoint = function(scale, point, absolute) { if (absolute) { // Transform zoom into a relative value scale = this.computeFromRelativeZoom(scale) } // If not a SVGPoint but has x and y then create a SVGPoint if (Utils.getType(point) !== 'SVGPoint') { if('x' in point && 'y' in point) { point = SvgUtils.createSVGPoint(this.svg, point.x, point.y) } else { throw new Error('Given point is invalid') } } this.zoomAtPoint(scale, point, absolute) } /** * Get zoom scale * * @return {Float} zoom scale */ SvgPanZoom.prototype.getZoom = function() { return this.viewport.getZoom() } /** * Get zoom scale for public usage * * @return {Float} zoom scale */ SvgPanZoom.prototype.getRelativeZoom = function() { return this.viewport.getRelativeZoom() } /** * Compute actual zoom from public zoom * * @param {Float} zoom * @return {Float} zoom scale */ SvgPanZoom.prototype.computeFromRelativeZoom = function(zoom) { return zoom * this.viewport.getOriginalState().zoom } /** * Set zoom to initial state */ SvgPanZoom.prototype.resetZoom = function() { var originalState = this.viewport.getOriginalState() this.zoom(originalState.zoom, true); } /** * Set pan to initial state */ SvgPanZoom.prototype.resetPan = function() { this.pan(this.viewport.getOriginalState()); } /** * Set pan and zoom to initial state */ SvgPanZoom.prototype.reset = function() { this.resetZoom() this.resetPan() } /** * Handle double click event * See handleMouseDown() for alternate detection method * * @param {Event} evt */ SvgPanZoom.prototype.handleDblClick = function(evt) { if (this.options.preventMouseEventsDefault) { if (evt.preventDefault) { evt.preventDefault() } else { evt.returnValue = false } } // Check if target was a control button if (this.options.controlIconsEnabled) { var targetClass = evt.target.getAttribute('class') || '' if (targetClass.indexOf('svg-pan-zoom-control') > -1) { return false } } var zoomFactor if (evt.shiftKey) { zoomFactor = 1/((1 + this.options.zoomScaleSensitivity) * 2) // zoom out when shift key pressed } else { zoomFactor = (1 + this.options.zoomScaleSensitivity) * 2 } var point = SvgUtils.getEventPoint(evt, this.svg).matrixTransform(this.svg.getScreenCTM().inverse()) this.zoomAtPoint(zoomFactor, point) } /** * Handle click event * * @param {Event} evt */ SvgPanZoom.prototype.handleMouseDown = function(evt, prevEvt) { if (this.options.preventMouseEventsDefault) { if (evt.preventDefault) { evt.preventDefault() } else { evt.returnValue = false } } Utils.mouseAndTouchNormalize(evt, this.svg) // Double click detection; more consistent than ondblclick if (this.options.dblClickZoomEnabled && Utils.isDblClick(evt, prevEvt)){ this.handleDblClick(evt) } else { // Pan mode this.state = 'pan' this.firstEventCTM = this.viewport.getCTM() this.stateOrigin = SvgUtils.getEventPoint(evt, this.svg).matrixTransform(this.firstEventCTM.inverse()) } } /** * Handle mouse move event * * @param {Event} evt */ SvgPanZoom.prototype.handleMouseMove = function(evt) { if (this.options.preventMouseEventsDefault) { if (evt.preventDefault) { evt.preventDefault() } else { evt.returnValue = false } } if (this.state === 'pan' && this.options.panEnabled) { // Pan mode var point = SvgUtils.getEventPoint(evt, this.svg).matrixTransform(this.firstEventCTM.inverse()) , viewportCTM = this.firstEventCTM.translate(point.x - this.stateOrigin.x, point.y - this.stateOrigin.y) this.viewport.setCTM(viewportCTM) } } /** * Handle mouse button release event * * @param {Event} evt */ SvgPanZoom.prototype.handleMouseUp = function(evt) { if (this.options.preventMouseEventsDefault) { if (evt.preventDefault) { evt.preventDefault() } else { evt.returnValue = false } } if (this.state === 'pan') { // Quit pan mode this.state = 'none' } } /** * Adjust viewport size (only) so it will fit in SVG * Does not center image */ SvgPanZoom.prototype.fit = function() { var viewBox = this.viewport.getViewBox() , newScale = Math.min(this.width/viewBox.width, this.height/viewBox.height) this.zoom(newScale, true) } /** * Adjust viewport size (only) so it will contain the SVG * Does not center image */ SvgPanZoom.prototype.contain = function() { var viewBox = this.viewport.getViewBox() , newScale = Math.max(this.width/viewBox.width, this.height/viewBox.height) this.zoom(newScale, true) } /** * Adjust viewport pan (only) so it will be centered in SVG * Does not zoom/fit/contain image */ SvgPanZoom.prototype.center = function() { var viewBox = this.viewport.getViewBox() , offsetX = (this.width - (viewBox.width + viewBox.x * 2) * this.getZoom()) * 0.5 , offsetY = (this.height - (viewBox.height + viewBox.y * 2) * this.getZoom()) * 0.5 this.getPublicInstance().pan({x: offsetX, y: offsetY}) } /** * Update content cached BorderBox * Use when viewport contents change */ SvgPanZoom.prototype.updateBBox = function() { this.viewport.simpleViewBoxCache() } /** * Pan to a rendered position * * @param {Object} point {x: 0, y: 0} */ SvgPanZoom.prototype.pan = function(point) { var viewportCTM = this.viewport.getCTM() viewportCTM.e = point.x viewportCTM.f = point.y this.viewport.setCTM(viewportCTM) } /** * Relatively pan the graph by a specified rendered position vector * * @param {Object} point {x: 0, y: 0} */ SvgPanZoom.prototype.panBy = function(point) { var viewportCTM = this.viewport.getCTM() viewportCTM.e += point.x viewportCTM.f += point.y this.viewport.setCTM(viewportCTM) } /** * Get pan vector * * @return {Object} {x: 0, y: 0} */ SvgPanZoom.prototype.getPan = function() { var state = this.viewport.getState() return {x: state.x, y: state.y} } /** * Recalculates cached svg dimensions and controls position */ SvgPanZoom.prototype.resize = function() { // Get dimensions var boundingClientRectNormalized = SvgUtils.getBoundingClientRectNormalized(this.svg) this.width = boundingClientRectNormalized.width this.height = boundingClientRectNormalized.height // Recalculate original state var viewport = this.viewport viewport.options.width = this.width viewport.options.height = this.height viewport.processCTM() // Reposition control icons by re-enabling them if (this.options.controlIconsEnabled) { this.getPublicInstance().disableControlIcons() this.getPublicInstance().enableControlIcons() } } /** * Unbind mouse events, free callbacks and destroy public instance */ SvgPanZoom.prototype.destroy = function() { var that = this // Free callbacks this.beforeZoom = null this.onZoom = null this.beforePan = null this.onPan = null this.onUpdatedCTM = null // Destroy custom event handlers if (this.options.customEventsHandler != null) { // jshint ignore:line this.options.customEventsHandler.destroy({ svgElement: this.svg , eventsListenerElement: this.options.eventsListenerElement , instance: this.getPublicInstance() }) } // Unbind eventListeners for (var event in this.eventListeners) { (this.options.eventsListenerElement || this.svg) .removeEventListener(event, this.eventListeners[event], !this.options.preventMouseEventsDefault ? passiveListenerOption : false) } // Unbind wheelListener this.disableMouseWheelZoom() // Remove control icons this.getPublicInstance().disableControlIcons() // Reset zoom and pan this.reset() // Remove instance from instancesStore instancesStore = instancesStore.filter(function(instance){ return instance.svg !== that.svg }) // Delete options and its contents delete this.options // Delete viewport to make public shadow viewport functions uncallable delete this.viewport // Destroy public instance and rewrite getPublicInstance delete this.publicInstance delete this.pi this.getPublicInstance = function(){ return null } } /** * Returns a public instance object * * @return {Object} Public instance object */ SvgPanZoom.prototype.getPublicInstance = function() { var that = this // Create cache if (!this.publicInstance) { this.publicInstance = this.pi = { // Pan enablePan: function() {that.options.panEnabled = true; return that.pi} , disablePan: function() {that.options.panEnabled = false; return that.pi} , isPanEnabled: function() {return !!that.options.panEnabled} , pan: function(point) {that.pan(point); return that.pi} , panBy: function(point) {that.panBy(point); return that.pi} , getPan: function() {return that.getPan()} // Pan event , setBeforePan: function(fn) {that.options.beforePan = fn === null ? null : Utils.proxy(fn, that.publicInstance); return that.pi} , setOnPan: function(fn) {that.options.onPan = fn === null ? null : Utils.proxy(fn, that.publicInstance); return that.pi} // Zoom and Control Icons , enableZoom: function() {that.options.zoomEnabled = true; return that.pi} , disableZoom: function() {that.options.zoomEnabled = false; return that.pi} , isZoomEnabled: function() {return !!that.options.zoomEnabled} , enableControlIcons: function() { if (!that.options.controlIconsEnabled) { that.options.controlIconsEnabled = true ControlIcons.enable(that) } return that.pi } , disableControlIcons: function() { if (that.options.controlIconsEnabled) { that.options.controlIconsEnabled = false; ControlIcons.disable(that) } return that.pi } , isControlIconsEnabled: function() {return !!that.options.controlIconsEnabled} // Double click zoom , enableDblClickZoom: function() {that.options.dblClickZoomEnabled = true; return that.pi} , disableDblClickZoom: function() {that.options.dblClickZoomEnabled = false; return that.pi} , isDblClickZoomEnabled: function() {return !!that.options.dblClickZoomEnabled} // Mouse wheel zoom , enableMouseWheelZoom: function() {that.enableMouseWheelZoom(); return that.pi} , disableMouseWheelZoom: function() {that.disableMouseWheelZoom(); return that.pi} , isMouseWheelZoomEnabled: function() {return !!that.options.mouseWheelZoomEnabled} // Zoom scale and bounds , setZoomScaleSensitivity: function(scale) {that.options.zoomScaleSensitivity = scale; return that.pi} , setMinZoom: function(zoom) {that.options.minZoom = zoom; return that.pi} , setMaxZoom: function(zoom) {that.options.maxZoom = zoom; return that.pi} // Zoom event , setBeforeZoom: function(fn) {that.options.beforeZoom = fn === null ? null : Utils.proxy(fn, that.publicInstance); return that.pi} , setOnZoom: function(fn) {that.options.onZoom = fn === null ? null : Utils.proxy(fn, that.publicInstance); return that.pi} // Zooming , zoom: function(scale) {that.publicZoom(scale, true); return that.pi} , zoomBy: function(scale) {that.publicZoom(scale, false); return that.pi} , zoomAtPoint: function(scale, point) {that.publicZoomAtPoint(scale, point, true); return that.pi} , zoomAtPointBy: function(scale, point) {that.publicZoomAtPoint(scale, point, false); return that.pi} , zoomIn: function() {this.zoomBy(1 + that.options.zoomScaleSensitivity); return that.pi} , zoomOut: function() {this.zoomBy(1 / (1 + that.options.zoomScaleSensitivity)); return that.pi} , getZoom: function() {return that.getRelativeZoom()} // CTM update , setOnUpdatedCTM: function(fn) {that.options.onUpdatedCTM = fn === null ? null : Utils.proxy(fn, that.publicInstance); return that.pi} // Reset , resetZoom: function() {that.resetZoom(); return that.pi} , resetPan: function() {that.resetPan(); return that.pi} , reset: function() {that.reset(); return that.pi} // Fit, Contain and Center , fit: function() {that.fit(); return that.pi} , contain: function() {that.contain(); return that.pi} , center: function() {that.center(); return that.pi} // Size and Resize , updateBBox: function() {that.updateBBox(); return that.pi} , resize: function() {that.resize(); return that.pi} , getSizes: function() { return { width: that.width , height: that.height , realZoom: that.getZoom() , viewBox: that.viewport.getViewBox() } } // Destroy , destroy: function() {that.destroy(); return that.pi} } } return this.publicInstance } /** * Stores pairs of instances of SvgPanZoom and SVG * Each pair is represented by an object {svg: SVGSVGElement, instance: SvgPanZoom} * * @type {Array} */ var instancesStore = [] var svgPanZoom = function(elementOrSelector, options){ var svg = Utils.getSvg(elementOrSelector) if (svg === null) { return null } else { // Look for existent instance for(var i = instancesStore.length - 1; i >= 0; i--) { if (instancesStore[i].svg === svg) { return instancesStore[i].instance.getPublicInstance() } } // If instance not found - create one instancesStore.push({ svg: svg , instance: new SvgPanZoom(svg, options) }) // Return just pushed instance return instancesStore[instancesStore.length - 1].instance.getPublicInstance() } } module.exports = svgPanZoom; },{"./control-icons":2,"./shadow-viewport":3,"./svg-utilities":5,"./uniwheel":6,"./utilities":7}],5:[function(require,module,exports){ var Utils = require('./utilities') , _browser = 'unknown' ; // http://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser if (/*@cc_on!@*/false || !!document.documentMode) { // internet explorer _browser = 'ie'; } module.exports = { svgNS: 'http://www.w3.org/2000/svg' , xmlNS: 'http://www.w3.org/XML/1998/namespace' , xmlnsNS: 'http://www.w3.org/2000/xmlns/' , xlinkNS: 'http://www.w3.org/1999/xlink' , evNS: 'http://www.w3.org/2001/xml-events' /** * Get svg dimensions: width and height * * @param {SVGSVGElement} svg * @return {Object} {width: 0, height: 0} */ , getBoundingClientRectNormalized: function(svg) { if (svg.clientWidth && svg.clientHeight) { return {width: svg.clientWidth, height: svg.clientHeight} } else if (!!svg.getBoundingClientRect()) { return svg.getBoundingClientRect(); } else { throw new Error('Cannot get BoundingClientRect for SVG.'); } } /** * Gets g element with class of "viewport" or creates it if it doesn't exist * * @param {SVGSVGElement} svg * @return {SVGElement} g (group) element */ , getOrCreateViewport: function(svg, selector) { var viewport = null if (Utils.isElement(selector)) { viewport = selector } else { viewport = svg.querySelector(selector) } // Check if there is just one main group in SVG if (!viewport) { var childNodes = Array.prototype.slice.call(svg.childNodes || svg.children).filter(function(el){ return el.nodeName !== 'defs' && el.nodeName !== '#text' }) // Node name should be SVGGElement and should have no transform attribute // Groups with transform are not used as viewport because it involves parsing of all transform possibilities if (childNodes.length === 1 && childNodes[0].nodeName === 'g' && childNodes[0].getAttribute('transform') === null) { viewport = childNodes[0] } } // If no favorable group element exists then create one if (!viewport) { var viewportId = 'viewport-' + new Date().toISOString().replace(/\D/g, ''); viewport = document.createElementNS(this.svgNS, 'g'); viewport.setAttribute('id', viewportId); // Internet Explorer (all versions?) can't use childNodes, but other browsers prefer (require?) using childNodes var svgChildren = svg.childNodes || svg.children; if (!!svgChildren && svgChildren.length > 0) { for (var i = svgChildren.length; i > 0; i--) { // Move everything into viewport except defs if (svgChildren[svgChildren.length - i].nodeName !== 'defs') { viewport.appendChild(svgChildren[svgChildren.length - i]); } } } svg.appendChild(viewport); } // Parse class names var classNames = []; if (viewport.getAttribute('class')) { classNames = viewport.getAttribute('class').split(' ') } // Set class (if not set already) if (!~classNames.indexOf('svg-pan-zoom_viewport')) { classNames.push('svg-pan-zoom_viewport') viewport.setAttribute('class', classNames.join(' ')) } return viewport } /** * Set SVG attributes * * @param {SVGSVGElement} svg */ , setupSvgAttributes: function(svg) { // Setting default attributes svg.setAttribute('xmlns', this.svgNS); svg.setAttributeNS(this.xmlnsNS, 'xmlns:xlink', this.xlinkNS); svg.setAttributeNS(this.xmlnsNS, 'xmlns:ev', this.evNS); // Needed for Internet Explorer, otherwise the viewport overflows if (svg.parentNode !== null) { var style = svg.getAttribute('style') || ''; if (style.toLowerCase().indexOf('overflow') === -1) { svg.setAttribute('style', 'overflow: hidden; ' + style); } } } /** * How long Internet Explorer takes to finish updating its display (ms). */ , internetExplorerRedisplayInterval: 300 /** * Forces the browser to redisplay all SVG elements that rely on an * element defined in a 'defs' section. It works globally, for every * available defs element on the page. * The throttling is intentionally global. * * This is only needed for IE. It is as a hack to make markers (and 'use' elements?) * visible after pan/zoom when there are multiple SVGs on the page. * See bug report: https://connect.microsoft.com/IE/feedback/details/781964/ * also see svg-pan-zoom issue: https://github.com/ariutta/svg-pan-zoom/issues/62 */ , refreshDefsGlobal: Utils.throttle(function() { var allDefs = document.querySelectorAll('defs'); var allDefsCount = allDefs.length; for (var i = 0; i < allDefsCount; i++) { var thisDefs = allDefs[i]; thisDefs.parentNode.insertBefore(thisDefs, thisDefs); } }, this ? this.internetExplorerRedisplayInterval : null) /** * Sets the current transform matrix of an element * * @param {SVGElement} element * @param {SVGMatrix} matrix CTM * @param {SVGElement} defs */ , setCTM: function(element, matrix, defs) { var that = this , s = 'matrix(' + matrix.a + ',' + matrix.b + ',' + matrix.c + ',' + matrix.d + ',' + matrix.e + ',' + matrix.f + ')'; element.setAttributeNS(null, 'transform', s); if ('transform' in element.style) { element.style.transform = s; } else if ('-ms-transform' in element.style) { element.style['-ms-transform'] = s; } else if ('-webkit-transform' in element.style) { element.style['-webkit-transform'] = s; } // IE has a bug that makes markers disappear on zoom (when the matrix "a" and/or "d" elements change) // see http://stackoverflow.com/questions/17654578/svg-marker-does-not-work-in-ie9-10 // and http://srndolha.wordpress.com/2013/11/25/svg-line-markers-may-disappear-in-internet-explorer-11/ if (_browser === 'ie' && !!defs) { // this refresh is intended for redisplaying the SVG during zooming defs.parentNode.insertBefore(defs, defs); // this refresh is intended for redisplaying the other SVGs on a page when panning a given SVG // it is also needed for the given SVG itself, on zoomEnd, if the SVG contains any markers that // are located under any other element(s). window.setTimeout(function() { that.refreshDefsGlobal(); }, that.internetExplorerRedisplayInterval); } } /** * Instantiate an SVGPoint object with given event coordinates * * @param {Event} evt * @param {SVGSVGElement} svg * @return {SVGPoint} point */ , getEventPoint: function(evt, svg) { var point = svg.createSVGPoint() Utils.mouseAndTouchNormalize(evt, svg) point.x = evt.clientX point.y = evt.clientY return point } /** * Get SVG center point * * @param {SVGSVGElement} svg * @return {SVGPoint} */ , getSvgCenterPoint: function(svg, width, height) { return this.createSVGPoint(svg, width / 2, height / 2) } /** * Create a SVGPoint with given x and y * * @param {SVGSVGElement} svg * @param {Number} x * @param {Number} y * @return {SVGPoint} */ , createSVGPoint: function(svg, x, y) { var point = svg.createSVGPoint() point.x = x point.y = y return point } } },{"./utilities":7}],6:[function(require,module,exports){ // uniwheel 0.1.2 (customized) // A unified cross browser mouse wheel event handler // https://github.com/teemualap/uniwheel module.exports = (function(){ //Full details: https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel var prefix = "", _addEventListener, _removeEventListener, support, fns = []; var passiveOption = {passive: true}; // detect event model if ( window.addEventListener ) { _addEventListener = "addEventListener"; _removeEventListener = "removeEventListener"; } else { _addEventListener = "attachEvent"; _removeEventListener = "detachEvent"; prefix = "on"; } // detect available wheel event support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel" document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel" "DOMMouseScroll"; // let's assume that remaining browsers are older Firefox function createCallback(element,callback) { var fn = function(originalEvent) { !originalEvent && ( originalEvent = window.event ); // create a normalized event object var event = { // keep a ref to the original event object originalEvent: originalEvent, target: originalEvent.target || originalEvent.srcElement, type: "wheel", deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1, deltaX: 0, delatZ: 0, preventDefault: function() { originalEvent.preventDefault ? originalEvent.preventDefault() : originalEvent.returnValue = false; } }; // calculate deltaY (and deltaX) according to the event if ( support == "mousewheel" ) { event.deltaY = - 1/40 * originalEvent.wheelDelta; // Webkit also support wheelDeltaX originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX ); } else { event.deltaY = originalEvent.detail; } // it's time to fire the callback return callback( event ); }; fns.push({ element: element, fn: fn, }); return fn; } function getCallback(element) { for (var i = 0; i < fns.length; i++) { if (fns[i].element === element) { return fns[i].fn; } } return function(){}; } function removeCallback(element) { for (var i = 0; i < fns.length; i++) { if (fns[i].element === element) { return fns.splice(i,1); } } } function _addWheelListener(elem, eventName, callback, isPassiveListener ) { var cb; if (support === "wheel") { cb = callback; } else { cb = createCallback(elem, callback); } elem[_addEventListener](prefix + eventName, cb, isPassiveListener ? passiveOption : false); } function _removeWheelListener(elem, eventName, callback, isPassiveListener ) { var cb; if (support === "wheel") { cb = callback; } else { cb = getCallback(elem); } elem[_removeEventListener](prefix + eventName, cb, isPassiveListener ? passiveOption : false); removeCallback(elem); } function addWheelListener( elem, callback, isPassiveListener ) { _addWheelListener(elem, support, callback, isPassiveListener ); // handle MozMousePixelScroll in older Firefox if( support == "DOMMouseScroll" ) { _addWheelListener(elem, "MozMousePixelScroll", callback, isPassiveListener ); } } function removeWheelListener(elem, callback, isPassiveListener){ _removeWheelListener(elem, support, callback, isPassiveListener); // handle MozMousePixelScroll in older Firefox if( support == "DOMMouseScroll" ) { _removeWheelListener(elem, "MozMousePixelScroll", callback, isPassiveListener); } } return { on: addWheelListener, off: removeWheelListener }; })(); },{}],7:[function(require,module,exports){ module.exports = { /** * Extends an object * * @param {Object} target object to extend * @param {Object} source object to take properties from * @return {Object} extended object */ extend: function(target, source) { target = target || {}; for (var prop in source) { // Go recursively if (this.isObject(source[prop])) { target[prop] = this.extend(target[prop], source[prop]) } else { target[prop] = source[prop] } } return target; } /** * Checks if an object is a DOM element * * @param {Object} o HTML element or String * @return {Boolean} returns true if object is a DOM element */ , isElement: function(o){ return ( o instanceof HTMLElement || o instanceof SVGElement || o instanceof SVGSVGElement || //DOM2 (o && typeof o === 'object' && o !== null && o.nodeType === 1 && typeof o.nodeName === 'string') ); } /** * Checks if an object is an Object * * @param {Object} o Object * @return {Boolean} returns true if object is an Object */ , isObject: function(o){ return Object.prototype.toString.call(o) === '[object Object]'; } /** * Checks if variable is Number * * @param {Integer|Float} n * @return {Boolean} returns true if variable is Number */ , isNumber: function(n) { return !isNaN(parseFloat(n)) && isFinite(n); } /** * Search for an SVG element * * @param {Object|String} elementOrSelector DOM Element or selector String * @return {Object|Null} SVG or null */ , getSvg: function(elementOrSelector) { var element , svg; if (!this.isElement(elementOrSelector)) { // If selector provided if (typeof elementOrSelector === 'string' || elementOrSelector instanceof String) { // Try to find the element element = document.querySelector(elementOrSelector) if (!element) { throw new Error('Provided selector did not find any elements. Selector: ' + elementOrSelector) return null } } else { throw new Error('Provided selector is not an HTML object nor String') return null } } else { element = elementOrSelector } if (element.tagName.toLowerCase() === 'svg') { svg = element; } else { if (element.tagName.toLowerCase() === 'object') { svg = element.contentDocument.documentElement; } else { if (element.tagName.toLowerCase() === 'embed') { svg = element.getSVGDocument().documentElement; } else { if (element.tagName.toLowerCase() === 'img') { throw new Error('Cannot script an SVG in an "img" element. Please use an "object" element or an in-line SVG.'); } else { throw new Error('Cannot get SVG.'); } return null } } } return svg } /** * Attach a given context to a function * @param {Function} fn Function * @param {Object} context Context * @return {Function} Function with certain context */ , proxy: function(fn, context) { return function() { return fn.apply(context, arguments) } } /** * Returns object type * Uses toString that returns [object SVGPoint] * And than parses object type from string * * @param {Object} o Any object * @return {String} Object type */ , getType: function(o) { return Object.prototype.toString.apply(o).replace(/^\[object\s/, '').replace(/\]$/, '') } /** * If it is a touch event than add clientX and clientY to event object * * @param {Event} evt * @param {SVGSVGElement} svg */ , mouseAndTouchNormalize: function(evt, svg) { // If no clientX then fallback if (evt.clientX === void 0 || evt.clientX === null) { // Fallback evt.clientX = 0 evt.clientY = 0 // If it is a touch event if (evt.touches !== void 0 && evt.touches.length) { if (evt.touches[0].clientX !== void 0) { evt.clientX = evt.touches[0].clientX evt.clientY = evt.touches[0].clientY } else if (evt.touches[0].pageX !== void 0) { var rect = svg.getBoundingClientRect(); evt.clientX = evt.touches[0].pageX - rect.left evt.clientY = evt.touches[0].pageY - rect.top } // If it is a custom event } else if (evt.originalEvent !== void 0) { if (evt.originalEvent.clientX !== void 0) { evt.clientX = evt.originalEvent.clientX evt.clientY = evt.originalEvent.clientY } } } } /** * Check if an event is a double click/tap * TODO: For touch gestures use a library (hammer.js) that takes in account other events * (touchmove and touchend). It should take in account tap duration and traveled distance * * @param {Event} evt * @param {Event} prevEvt Previous Event * @return {Boolean} */ , isDblClick: function(evt, prevEvt) { // Double click detected by browser if (evt.detail === 2) { return true; } // Try to compare events else if (prevEvt !== void 0 && prevEvt !== null) { var timeStampDiff = evt.timeStamp - prevEvt.timeStamp // should be lower than 250 ms , touchesDistance = Math.sqrt(Math.pow(evt.clientX - prevEvt.clientX, 2) + Math.pow(evt.clientY - prevEvt.clientY, 2)) return timeStampDiff < 250 && touchesDistance < 10 } // Nothing found return false; } /** * Returns current timestamp as an integer * * @return {Number} */ , now: Date.now || function() { return new Date().getTime(); } // From underscore. // Returns a function, that, when invoked, will only be triggered at most once // during a given window of time. Normally, the throttled function will run // as much as it can, without ever going more than once per `wait` duration; // but if you'd like to disable the execution on the leading edge, pass // `{leading: false}`. To disable execution on the trailing edge, ditto. // jscs:disable // jshint ignore:start , throttle: function(func, wait, options) { var that = this; var context, args, result; var timeout = null; var previous = 0; if (!options) options = {}; var later = function() { previous = options.leading === false ? 0 : that.now(); timeout = null; result = func.apply(context, args); if (!timeout) context = args = null; }; return function() { var now = that.now(); if (!previous && options.leading === false) previous = now; var remaining = wait - (now - previous); context = this; args = arguments; if (remaining <= 0 || remaining > wait) { clearTimeout(timeout); timeout = null; previous = now; result = func.apply(context, args); if (!timeout) context = args = null; } else if (!timeout && options.trailing !== false) { timeout = setTimeout(later, remaining); } return result; }; } // jshint ignore:end // jscs:enable /** * Create a requestAnimationFrame simulation * * @param {Number|String} refreshRate * @return {Function} */ , createRequestAnimationFrame: function(refreshRate) { var timeout = null // Convert refreshRate to timeout if (refreshRate !== 'auto' && refreshRate < 60 && refreshRate > 1) { timeout = Math.floor(1000 / refreshRate) } if (timeout === null) { return window.requestAnimationFrame || requestTimeout(33) } else { return requestTimeout(timeout) } } } /** * Create a callback that will execute after a given timeout * * @param {Function} timeout * @return {Function} */ function requestTimeout(timeout) { return function(callback) { window.setTimeout(callback, timeout) } } },{}]},{},[1]);